import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { UserApi } from '@/api/user/api.js';
import { useDispatch } from 'react-redux';
import { UserAction } from '@/actions/user/action.js';
import ModalUtil from '@/utils/modal.js';
import { FromContent } from './styles.jsx';

function Login() {
  const dispatch = useDispatch();

  const onFinish = async (formData) => {
    const { code, data } = await UserApi.login(formData);
    if (code === 0) {
      const token = data.token;
      if (token) {
        dispatch(UserAction.setToken(data.token));
        ModalUtil.msgSuccess('登录成功');
      } else {
        ModalUtil.msgError('登录失败');
      }
    }
  };

  return (
    <FromContent justify="center" align="center">
      <div className="wave"></div>
      <LoginForm title="Demo" subTitle="快速开发系统" onFinish={onFinish}>
        <ProFormText
          name="username"
          fieldProps={{
            size: 'large',
            prefix: <UserOutlined className={'prefixIcon'} />
          }}
          placeholder={'用户名'}
          rules={[
            {
              required: true,
              message: '请输入用户名'
            }
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{
            size: 'large',
            prefix: <LockOutlined className={'prefixIcon'} />
          }}
          placeholder={'密码'}
          rules={[
            {
              required: true,
              message: '请输入密码'
            }
          ]}
        />
      </LoginForm>
    </FromContent>
  );
}

export default Login;
